テキスト : CSS
CSSとは？
Cascading Style Sheets カスケーディング・スタイル・シート
Cascading : 「階段状の滝のような」「連鎖的に伝わる」
Cascadingとは、「階段状の滝のような」「連鎖的に伝わる」という意味ですが、 様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用されます。
CSSの目的は
HTMLで作られた文書構造にデザインを加えて見栄えを整えることにあります。
触ってみよう
デスクトップに「study」というフォルダを作成（既に作成ずみの場合は飛ばしてもらってかまわない）
↓
「study」フォルダの中に「css」というフォルダを作成
↓
「css」フォルダの中に「colortext1.html」という名前でファイルを作成
↓
VScodeで「study」フォルダを開く
CUI
code:console
$ mkdir study
$ cd study
$ mkdir css
$ cd css
$ touch colortext1.html
$ code ../
htmlファイルの作成方法
colortext1
code:colortext1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- titleの 中身を変更 -->
<title>red text</title>
</head>
<body>
<!-- ↓を追加 -->
<h1 style="color: red;">Red</h1>
</body>
</html>
ブラウザにドラッグ&ドロップで画面に「Red」(赤色)が表示されればOK
CSSの指定方法
１） インラインスタイルシート
style属性を用いて指定する。
例）
→ colortext1.htmlを参照。
2）内部スタイルシート
HTMLのヘッダー部分にstyleタグを使って指定する。ページ内のスタイルを一括して設定する。
例）
code:colortext2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blue text</title>
<style type="text/css">
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Blue</h1>
</body>
</html>
styleタグの中身は、以下の形式で定義しますセレクタ { プロパティ: 値 }
3）外部スタイルシート
CSSファイルを作成し、HTMLファイルから参照する。
code:colortext3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5からはtype属性は必要ない -->
<link rel="stylesheet" type="text/css" href="colortext.css">
<title>green text</title>
</head>
<body>
<h1>Green</h1>
</body>
</html>
同じフォルダ内にcolortext.cssを作成する。
code:colortext.css
h1 {
color: green;
}
↓ 色の名前ではなく、カラーコードで指定可能（光の三原色 : RGB）
code:colortext.css
h1 {
}
基本的には外部スタイルシートを使う
セレクタ
以下のselector.htmlとselector.cssを作成してください。
code:selector.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="selector.css">
<title>selector</title>
</head>
<body>
<h1>1つ目のh1</h1>
<h1>2つ目のh1</h1>
<h1>3つ目のh1</h1>
</body>
</html>
code:selector.css
h1 {
color: red;
}
selector.htmlをブラウザで表示すると、すべてのh1要素が赤になってしまいます。
h1要素を別々の色にするにはどうしたらいいでしょうか？
selector.htmlとselector.cssの変更
code:selector.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="selector.css">
<title>selector</title>
</head>
<body>
<h1>1つ目のh1</h1>
<h1 id="blue">2つ目のh1</h1>
<h1 class="green">3つ目のh1</h1>
</body>
</html>
code:selector.css
h1 {
color: red;
}
color: blue;
}
.green {
color: green;
}
IDセレクタ
id属性に設定した値を利用するセレクタ。
id名の前にシャープ（#）をつけたものがidセレクタになります。
※ 1つのHTMLファイルの中で、複数の要素に同じidをつけてはいけない
クラスセレクタ
class属性に設定した値を利用するセレクタ。
class名の前にドット(.)を付けたものがclassセレクタになります。
classはidと違って、1つのHTMLファイルの中で複数の要素に付与できます。
Q. selector.htmlを以下で書き換えると、「3つ目のh1」の色はどうなるでしょう？
code:selector.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="selector.css">
<title>selector</title>
</head>
<body>
<h1>1つ目のh1</h1>
<!-- 説明のため同じid属性を残している。本来は一つにすべき -->
<h1 id="blue">2つ目のh1</h1>
<h1 id="blue" class="green">3つ目のh1</h1>
</body>
</html>
カスケード
要素（タイプセレクタ） クラスセレクタ IDセレクタ
補足）
クラスセレクタで定義する場合が多い。
セレクタを組み合わせることもできる。
code:red1.css
div, h1 {
color: red;
}
カンマ区切り 複数指定
divタグ・h1タグの両方がスタイル適用対象となる。
code:red2.css
div h1 {
color: red;
}
スペース区切り 包含関係
divタグの中に定義されたh1タグがスタイル適用対象となる。
さまざまなプロパティ
以下のsample.cssとsample.htmlを書いてください。
code:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="sample.css">
<title>CSSプロパティのサンプル</title>
</head>
<body>
<div class="frame1">
Frame1
</div>
<div class="frame2">
Frame2
</div>
<div class="frame3">
Frame3
</div>
<div class="border">
赤い実線の境界線
</div>
<span class="block-frame">display属性の値がblock要素1</span>
<span class="block-frame">display属性の値がblock要素2</span>
<div class="inline-block-frame">display属性の値がinline-block要素1</div>
<div class="inline-block-frame">display属性の値がinline-block要素2</div>
</body>
</html>
code:sample.css
/* 背景 */
body {
background-color: gray;
}
/* 幅 */
.frame1 {
width: 200px;
background-color: white;
}
.frame2 {
width: 50%;
background-color: white;
}
/* 余白 */
.frame3 {
margin: 100px;
padding: 20px;
color: white;
}
/* 境界線 */
.border {
background-color: white;
}
/* displayの違い */
.block-frame {
display: block;
margin-top: 10px;
background-color: white;
}
.inline-block-frame {
display: inline-block;
margin-top: 10px;
background-color: white;
}
エクササイズ、以下の表示結果となるように、CSSファイルにプロパティと値を追加してください。
https://gyazo.com/7c603e4210280f59218c89d7a5b683a5
code:ex.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ex.css">
<title>Exercise</title>
</head>
<body>
<h1 class="blue-dot-border">青い点線の境界線</h1>
<div class="center1">
<span class="center2">太字で中央揃え</span>
</div>
<div class="flex1">
<div class="flex2">flexにおける右端</div>
</div>
</body>
</html>
code:ex.css
.blue-dot-border {
}
.center1 {
}
.center2 {
}
.flex1 {
display: flex;
}
.flex2 {
width: 100px;
}
補足